<script setup lang="ts">
const { $Hammer } = useNuxtApp();

interface VideoProps {
  src: string;
  poster?: string;
}

const props = defineProps<VideoProps>();

const player = shallowRef();

let isFirstPlay = true;

const handleTap = () => {
  if (!player.value.paused?.()) {
    player.value?.pause?.();
  } else {
    // 在有封面的情况下会存在点不动的情况
    const posterEl = document.querySelector<HTMLButtonElement>(".vjs-poster");
    if (posterEl) {
      posterEl.style.display = "none";
    }
    setTimeout(() => {
      // 第一次播放的时候苹果手机会有问题
      if (isFirstPlay) {
        isFirstPlay = false;
        const btn = document.querySelector<HTMLButtonElement>(
          ".vjs-big-play-button",
        );
        btn?.click?.();
      } else {
        player.value?.play?.();
      }
    });
  }
};

const handleMounted = (payload: any) => {
  player.value = payload.player;
  const videoElement: HTMLDivElement = payload.player.el();

  const videoEl = videoElement.querySelector<HTMLVideoElement>("video");
  videoEl?.setAttribute("controlslist", "nodownload");

  const hammer = new $Hammer(videoElement);
  hammer.on("tap", handleTap);
};

const handleEvent = (log: any) => {
  // console.log("Basic player event", log);
};

// watchEffect(() => {
//   if (props.src) {
//     player.value?.play?.();
//   }
// });

const handleLoadeddata = () => {
  // player.value?.play?.();
  console.log("--->> handleLoadeddata");
  // handleTap();
};

const handleReady = () => {
  console.log("--->> handleReady");
  // handleTap();
  // player.value?.play?.();
};

const handleCanPlay = () => {
  console.log("可以播放");
};

const handleError = (evt) => {
  console.log("失败");
  console.log(evt);
};
</script>

<template>
  <div class="video-wrapper">
    <video-player
      class="video-player vjs-big-play-centered"
      :src="src"
      :poster="poster"
      playsinline
      crossorigin="anonymous"
      controls
      :volume="0.6"
      :playback-rates="[0.7, 1.0, 1.5, 2.0]"
      :children="[
        // custom Video.js children component
        // https://videojs.com/guides/options/#children
        'mediaLoader',
        'posterImage',
        'bigPlayButton',
        'loadingSpinner',
        'controlBar',
        'textTrackDisplay',
      ]"
      :control-bar="{
        // custom Video.js control bar component
        // https://videojs.com/guides/options/#componentname
        volumePanel: true,
      }"
      @error="handleError"
      @mounted="handleMounted"
      @ready="handleReady"
      @play="handleEvent($event)"
      @pause="handleEvent($event)"
      @ended="handleEvent($event)"
      @loadeddata="handleLoadeddata"
      @waiting="handleEvent($event)"
      @playing="handleEvent($event)"
      @canplay="handleCanPlay"
      @canplaythrough="handleEvent($event)"
      @timeupdate="handleEvent(player?.currentTime())"
    >
      <template v-slot="{ player, state }">
        <div class="custom-player-controls">
          <button @click="state.playing ? player.pause() : player.play()">
            {{ state.playing ? "Pause" : "Play" }}
          </button>
          <button @click="player.muted(!state.muted)">
            {{ state.muted ? "UnMute" : "Mute" }}
          </button>
          <!-- more custom controls elements ... -->
        </div>
      </template>
    </video-player>
  </div>
</template>

<style scoped lang="scss">
.video-wrapper {
  width: 100%;
  height: 100%;
}

.video-player {
  width: 100%;
  height: 100%;
}

:deep(.vjs-paused .vjs-big-play-button),
:deep(.vjs-paused.vjs-has-started .vjs-big-play-button) {
  //display: block;
}

.custom-player-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
}
</style>
